<template>
  <div class="container">
    <!-- 卡片区域 -->
    <el-card>
      <!-- 顶部按钮 -->
      <div class="add-btn">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="small"
          @click="addQuestion"
          >新增试题</el-button
        >
      </div>
      <!-- 表单区域 -->
      <el-form ref="formRef" :model="queryInfo">
        <el-form-item label="学科" class="c2" prop="subjectID">
          <el-select v-model="queryInfo.subjectID" placeholder="请选择">
            <el-option
              v-for="(item, index) in formObj"
              :key="index"
              :label="item.subject"
              :value="item.subjectID"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级目录" prop="catalogID">
          <el-select v-model="queryInfo.catalogID" placeholder="请选择">
            <el-option
              :disabled="queryInfo.subjectID ? false : true"
              v-for="(item, index) in formObj"
              :key="index"
              :label="item.catalog"
              :value="item.catalogID"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签" prop="tagsID">
          <el-select v-model="queryInfo.tagsID" placeholder="请选择">
            <el-option
              :disabled="queryInfo.subjectID ? false : true"
              v-for="(item, index) in formObj"
              :key="index"
              :label="item.tags"
              :value="item.tags"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键字" prop="keyword">
          <el-input v-model="queryInfo.keyword" class="ipt"> </el-input>
        </el-form-item>
        <!-- 第二排 -->
        <el-form-item label="试题类型" prop="questionType">
          <el-select v-model="queryInfo.questionType" placeholder="请选择">
            <el-option label="单选" value="1"> </el-option>
            <el-option label="多选" value="2"> </el-option>
            <el-option label="简答" value="3"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="难度" prop="difficulty">
          <el-select v-model="queryInfo.difficulty" placeholder="请选择">
            <el-option label="简单" value="1"> </el-option>
            <el-option label="一般" value="2"> </el-option>
            <el-option label="困难" value="3"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向" prop="direction">
          <el-select v-model="queryInfo.direction" placeholder="请选择">
            <el-option label="o2o" value="1"> </el-option>
            <el-option label="外包服务" value="2"> </el-option>
            <el-option label="企业服务" value="3"> </el-option>
            <el-option label="互联网金融" value="4"> </el-option>
            <el-option label="企业咨询" value="5"> </el-option>
            <el-option label="互联网" value="6"> </el-option>
            <el-option label="电子商务" value="7"> </el-option>
            <el-option label="其他" value="8"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="录入人" prop="creator">
          <el-select v-model="queryInfo.creator" placeholder="请选择">
            <el-option label="超级管理员" value="1"> </el-option>
            <el-option label="录入管理员" value="2"> </el-option>
          </el-select>
        </el-form-item>
        <!-- 第三排 -->
        <el-form-item label="题目备注" prop="remarks">
          <el-input v-model="queryInfo.remarks" class="ipt"></el-input>
        </el-form-item>
        <el-form-item label="企业简称" prop="shortName">
          <el-input
            v-model="queryInfo.shortName"
            class="ipt"
            prop="shortName"
          ></el-input>
        </el-form-item>
        <!-- <div class="block"> -->
        <el-form-item label="城市" class="block">
          <div class="selec">
            <el-form-item prop="province" class="province">
              <el-select
                v-model="queryInfo.province"
                placeholder="请选择"
                @change="handleProvince"
              >
                <el-option
                  v-for="item in citySelect.province"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="city" class="city">
              <el-select v-model="queryInfo.city" placeholder="请选择">
                <el-option
                  v-for="item in citySelect.cityDate"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form-item>
        <!-- </div> -->
        <el-form-item label="">
          <div class="bottom-btn">
            <el-button size="mini" @click="clearFrom">清除</el-button>
            <el-button type="primary" size="mini" @click="searchQuestion"
              >搜索</el-button
            >
          </div>
        </el-form-item>
      </el-form>
      <!-- 消息提示文案 -->
      <div class="info">
        <el-alert :title="alertText" type="info" show-icon :closable="false">
        </el-alert>
      </div>
      <!-- tab表格 -->
      <el-table
        style="width: 100%"
        :data="tableData"
        :fit="true"
        v-loading="listLoading"
      >
        <el-table-column label="试题编号" prop="number"></el-table-column>
        <el-table-column label="学科" prop="subject"></el-table-column>
        <el-table-column label="目录" prop="catalog"></el-table-column>
        <el-table-column label="题型" prop="">
          <template slot-scope="scope">{{
            scope.row.questionType === "1"
              ? "单选"
              : scope.row.questionType === "2"
              ? "多选"
              : "简答"
          }}</template>
        </el-table-column>
        <el-table-column label="题干" width="180px">
          <template slot-scope="scope">{{
            scope.row.question | html2Text(scope.row.question)
          }}</template>
        </el-table-column>
        <el-table-column label="录入时间" width="180px">
          <template slot-scope="scope">{{
            scope.row.addDate | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}")
          }}</template>
        </el-table-column>
        <el-table-column label="难度" prop="">
          <template slot-scope="scope">{{
            scope.row.difficulty === "1"
              ? "简单"
              : scope.row.difficulty === "2"
              ? "一般"
              : "困难"
          }}</template>
        </el-table-column>
        <el-table-column label="录入人" prop="creator"></el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <el-button
              @click="viewQuestion(scope.row.id)"
              type="primary"
              icon="el-icon-view"
              circle
              size="mini"
              plain
            ></el-button>
            <el-button
              @click="editQuestion(scope.row.id)"
              type="success"
              icon="el-icon-edit"
              circle
              size="mini"
              plain
            ></el-button>
            <el-button
              @click="deleteQuestion(scope.row.id)"
              type="danger"
              icon="el-icon-delete-solid"
              circle
              size="mini"
              plain
            ></el-button>
            <el-button
              @click="addQuestionChoice(scope.row.id)"
              type="warning"
              icon="el-icon-check"
              circle
              size="mini"
              plain
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="paginatio">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="queryInfo.page"
          :page-size="queryInfo.pagesize"
          layout="prev, pager, next, sizes,jumper"
          :page-sizes="[5, 10, 15, 20]"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 预览 -->
    <el-dialog title="题目预览" :visible.sync="addViewDialogVisible">
      <!-- 预览内容组件 -->
      <question-view
        :tableData="tableDataItem"
        :checkedbox="checkedbox"
        :radiobox="radiobox"
        v-if="addViewDialogVisible"
      ></question-view>
      <span slot="footer">
        <el-button @click="addViewDialogVisible = false" type="primary"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list as questionList, choiceAdd as addChoice, remove as removeQuestion, detail as detailQuestion } from '@/api/hmmm/questions.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import QuestionView from './question-view.vue'
export default {
  name: 'questions',
  components: {
    QuestionView
  },
  props: {},
  data () {
    return {
      listLoading: false,
      alertText: '',
      total: 0,
      tableData: [],
      formObj: {},
      choiceState: {
        id: '',
        choiceState: 1
      },
      delete: {
        id: ''
      },
      addViewDialogVisible: false,
      queryInfo: {
        page: 1,
        pagesize: 5,
        subjectID: null, // 学科
        catalogID: null, // 目录
        tagsID: null, // 标签
        keyword: null, // 关键字
        difficulty: null, // 试题难度
        questionType: null, // 试题类型
        direction: null, // 方向
        creator: null, // 录入人
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        province: null, // 省份
        city: null // 城市
      },
      // 省市
      citySelect: {
        province: [],
        cityDate: []
      },
      tableDataItem: {},
      checkedbox: [],
      radiobox: ''

    }
  },
  computed: {},
  watch: {},
  created () {
    this.onLoadQuestions()
    this.getCityData()
  },
  mounted () {

  },
  methods: {
    // 获取基础题库列表
    async onLoadQuestions () {
      this.listLoading = true
      const { data } = await questionList(this.queryInfo)
      this.tableData = data.items
      this.formObj = { ...data.items }
      this.total = data.counts
      this.alertText = `共 ${this.total} 条记录`
      this.listLoading = false
    },
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      if (this.queryInfo.page === 1) {
        this.onLoadQuestions(this.queryInfo)
      }
    },
    handleCurrentChange (newNum) {
      this.queryInfo.page = newNum
      this.onLoadQuestions()
    },
    // 获取省
    getCityData () {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince (e) {
      this.citySelect.cityDate = citys(e)
      this.queryInfo.city = this.citySelect.cityDate[0]
    },
    // 清空表单
    clearFrom () {
      this.$refs.formRef.resetFields()
      this.onLoadQuestions()
    },
    // 新增试题
    addQuestion () {
      this.$router.push('/questions/new/:id')
    },
    // 搜索功能
    async searchQuestion () {
      this.queryInfo.page = 1
      this.onLoadQuestions(this.queryInfo)
    },
    // 修改
    editQuestion (val) {
      this.$router.push('/questions/new/' + val)
      // await updateQuestion(this.edit)
    },
    // 加入精选
    addQuestionChoice (id) {
      this.choiceState.id = id
      this.$confirm('此操作将题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async () => {
        await addChoice(this.choiceState)
        this.$router.push('/questions/choice')
        this.$message({
          type: 'success',
          message: '加入精选题库成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消成功!'
        })
      })
    },
    // 删除
    deleteQuestion (val) {
      this.delete.id = val
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await removeQuestion(this.delete)
        this.onLoadQuestions()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消成功!'
        })
      })
    },
    // 预览
    async viewQuestion (val) {
      this.addViewDialogVisible = true
      const { data } = await detailQuestion({
        id: val
      })
      this.tableDataItem = data
      console.log(this.tableDataItem)
      // console.log(data)
      data.options.forEach(item => {
        if (item.isRight === 1) {
          this.checkedbox.push(item.title)
          this.radiobox = item.title
        }
      })
    }

  }

}
</script>

<style lang="less" scoped>
.container {
  padding: 10px;
  .add-btn {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 15px;
  }
  /deep/.el-form {
    flex-wrap: wrap;
    display: flex;
    .el-form-item--medium {
      display: flex;
      flex: 25%;
      .el-form-item__content {
        flex: 1;
      }
    }
  }

  .el-form-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /deep/.el-form-item__label {
    width: 80px;
    text-align: right;
  }
  .ipt {
    max-width: 221px;
  }
  .select-city {
    display: flex;
    justify-content: space-between;
    max-width: 221px;
  }
  .bottom-btn {
    display: flex;
    justify-content: flex-end;
    max-width: 301px;
  }
  .info {
    margin-bottom: 10px;
  }
  /deep/.block {
    .selec {
      display: flex;
      // justify-content: space-between;
      .city,
      .province {
        max-width: 111px;
      }
    }
  }
  .paginatio {
    float: right;
    margin: 10px 0;
  }
}
</style>
